// 文本溢出省略
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis-2 { 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
// 加载中动画
/* 旋转加载中动画 CSS样式 */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;  /* 浅灰色背景边框 */
  border-top: 5px solid #3498db;  /* 蓝色前景边框（形成缺口） */
  border-radius: 50%;  /* 圆形 */
  animation: spin 1s linear infinite;  /* 应用旋转动画 */
}

@keyframes spin {
  0% { transform: rotate(0deg); }  /* 开始：0度 */
  100% { transform: rotate(360deg); }  /* 结束：360度（一圈） */
}

/* 点阵跳动动画 CSS样式 */
.dot-loader {
  display: flex;
  justify-content: center;
  gap: 3px;  /* 圆点间距 */
}

.dot-loader span {
  width: 6px;
  height: 6px;
  background-color: #f70e0e;
  border-radius: 50%;
  animation: bounce 1.4s ease-in-out infinite;  /* 应用跳动动画 */
}

/* 为每个圆点设置不同的延迟，实现依次跳动 */
.dot-loader span:nth-child(1) { animation-delay: 0s; }
.dot-loader span:nth-child(2) { animation-delay: 0.2s; }
.dot-loader span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }  /* 开始/结束：缩小到0 */
  40% { transform: scale(1); }  /* 中间：放大到原始大小 */
}


// 自定义文本颜色

.text-brown {
  color: var(--text-color-brown);
}

// 自定义背景颜色
.bg-brown {
  background-color: var(--text-color-brown);
}
.bg-primary-light {
  background-color: var(--primary-light-color);
}
.bg-primary {
  background-color: var(--primary-color);
}
// 自定义边框颜色
.border-brown {
  border-color: var(--text-color-brown);
}
.border-brown-100 {
  border-color: var(--text-color-brown-100);
}

// 自定义边框样式
.border-rounded {
  border-radius: 8px;
}

// 自定义输入框样式
.base-input {
 background-color: transparent;outline: none;
}

// 三角形集合

// --三角形带边框，向上
.triangle-up {
  position: relative; /* 为伪元素的绝对定位提供参照 */
}

.triangle-up::before {
  /* 伪元素作为边框（大三角形） */
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 7px solid transparent; /* 比内容三角形大2px */
  border-bottom-color: rgb(223, 221, 221); /* 边框颜色 */
}

.triangle-up::after {
  /* 伪元素作为内容（小三角形） */
  content: "";
  position: absolute;
  top: 1.5px; /* 微调位置，覆盖在边框三角形上 */
  left: 0px; /* 微调位置，向左移动2px以抵消边框差异 */
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-bottom-color: rgb(255, 255, 255); /* 内容颜色 */
}


